<!DOCTYPE html>
<html>
	<head>
		<meta charset='UTF-8'>
		<title></title>
		<link href='../../css/bootstrap.min.css' rel='stylesheet'>
		<script src='../../js/jquery-3.2.1.min.js'></script>
		<script src='../../js/bootstrap.min.js'></script>
		<script type='text/javascript' src='../../js/jquery-2.1.4.js' ></script>
		<script type='text/javascript' src='../../js/path.js' ></script>
		<style>
			
			#container {
				width: 50%;
				margin-left: 250px;
			}
			#but1{
				width: 150px;
				height: 30px;
				background-color: #bce8f1;
		
				font-family: 'arial, helvetica, sans-serif';
				color: #31708f;
				border-radius: inherit;
			}
			#jieguo,#jieguo1,#jieguo2{
				color: red;
			}
		</style>
	</head>

	<body>

		<div class='panel panel-info' id='container' align='center'>
			<div class='panel-heading'>
				<h1 class='panel-title'>添加电脑</h1>
			</div>
			<div class='panel-body'>
				<div style='padding: 100px 100px 10px;' align='center'>
      <div class='input-group'>
         <span class='input-group-addon'>电脑品牌</span>
         <input type='text' class='form-control'  name='brand' onblur='yzBrand();'>
         <div id='jieguo1'></div>
      </div>
         	 <br>
        <div class='input-group'>
         <span class='input-group-addon'>电脑型号</span>
         <input type='text' class='form-control'  name='model' onblur='yzModel();'>
         <div id='jieguo3'></div>
      </div>
         <br>
       	<div class='input-group'>
	       	 <span class='input-group-addon'>电脑价格</span>
	       	<input type='text' class='form-control' name='price' onblur='yzSalary();'>
       		<div id='jieguo2'></div>
       	</div>
         	 
         	 <br>
         	 	 <div class='input-group'>
         	 <span class='input-group-addon'>电脑所属公司</span>
         		<select class='company'>
         		
         		</select>
         	</div>
         	 <br>
         	 	<div id='jieguo'></div>
         	 	
			</div>
		</div>
		<input type='button' value='添加' id='but1'/>
		</div>
	</body>
		<script>
			var xx = getPath()+'/computer';
			
			function yzBrand(){
				var cardNo = $('input[name=brand]').val();
				if(''==cardNo ||  null == cardNo){
					$('#jieguo1').text('请重新输入...');
					return false;
				}else{
					$('#jieguo1').empty();
					return true;
				}
			}
			
			function yzModel(){
				var cardNo = $('input[name=model]').val();
				if(''==cardNo ||  null == cardNo){
					$('#jieguo3').text('请输入...');
					return false;
				}else{
					$('#jieguo3').empty();
					return true;
				}
			}
			function yzSalary(){
				var cardNo = $('input[name=price]').val();
				var patten = new RegExp(/^\d{1,8}(?:\.\d{0,2})?$/);
				
				if(patten.test(cardNo)!=true){
				 	$('#jieguo2').text('您输入的数字有误 ，请重新输入(价格最多只有两位小数)...');
				 	return false;
				 }else {
				 	$('#jieguo2').empty();
				 	return true;
				 }
			}
			$('#but1').click(function(){
			  
			  var tid = $('option[name=company]:selected')[0].value;
				 if(yzBrand()  && yzSalary()){
				 	 $.ajax({
					 	type:'post',
						url:xx+'/add',
						
						data:{
							
							brand:$('input[name=brand]').val(),
							model:$('input[name=model]').val(),
							price:$('input[name=price]').val(),
							companyId:tid
							},
						async:true,
						dataType:'json',
						success:function(jsonData){
							console.log(jsonData.result);
							$('#jieguo').text(jsonData.jieguo);
							if(jsonData.result=='success'){
								window.location.href='computer-list.html';
							}
						}
					 })
				 }
				
			})
			
			//所有的公司
			$(function(){
				$.ajax({
					type:'post',
					url:getPath()+'/company/findAllCompanys',
					
					async:true,
					dataType:'json',
					success:function(jsonData){
						console.log(jsonData.result);
						if(jsonData.result=='success'){
							var data = jsonData.data;
							
							$(data).each(function(index,data){
								var name = data.name;
								var id = data.id;
								var op = $('<option name="company" value="'+id+'">'+name+'</option>')
								$('.company').append(op);
							})
						}
					
					}
				});
			})
			
		
		</script>
	</head>
</html>
